<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-01-26 13:54:34
 * @Function: Please Input Function
-->
<script>
import { Dialog } from 'element-ui';

export default {
  name: 'LkDialog',
  props: Object.assign({}, Dialog.props, {
    visible: {
      type: Boolean,
      default: false
    },
    okText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    center: {
      type: Boolean,
      default: false
    },
    closeOnclickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: true
    }
  }),
  // 定义属性
  data () {
   return {

   };
  },
  // 方法集合
  methods: {

  },
  render () {
    const props = {};
    Object.keys(Dialog.props).forEach(k => {
      typeof this[k] !== 'undefined' && (props[k] = this[k]);
      return props[k];
    });

    const footerDefault = (
      <template slot="footer">
        {props.showClose ? <el-button v-show="props.showClose" key="back" size="small" plain onClick={() => { this.$emit('close'); }}>
          {this.cancelText || '取消'}
        </el-button> : ''}
        <el-button key="submit" size="small" type="primary" onClick={() => { this.$emit('ok'); }}>
          {this.okText || '确定'}
        </el-button>
      </template>
    );

    const title = this.$slots.title ? (
      <template slot="title">
        {this.$slots.title}
      </template>
    ) : '';

    const footer = this.$slots.footer ? (
      <template slot="footer">
        {this.$slots.footer}
      </template>
    ) : footerDefault;

    return (
      <el-dialog
        class={'lk-dialog'}
        visible={this.visible}
        {...{ props, on: { ...this.$listeners } }}>
        {title}
        {this.$slots.default}
        {footer}
        </el-dialog>
    );
  }
};
</script>

<style lang='scss' scoped>

.lk-dialog{
  ::v-deep .el-dialog__header{
    padding: 15px 20px;
    border-bottom: 1px solid $--border-color-lighter;
    text-align: left;
  }
  ::v-deep .el-dialog__body{
    padding: 0;
  }
  ::v-deep .el-dialog__footer{
  }
}
</style>
